<template>
  <div class="container">
    <div class="search-container">
      <img src="../../static/img/back.png" alt="" @touchstart.stop.prevent="back" class="back"/>
      <div class="search">
        <input ref="searchMain" type="search" placeholder="查询热门养老院、医院、体检中心" v-model="searchword">
      </div>
      <span id="back" @click="tosearch">搜索</span>
    </div>
    <scroll class="container-scroll" :data="dataList">
      <!--历史搜索-->
      <div>
        <div class="container-scroll-box">
          <div class="hot-search">
            <div class="hot-search-title">
              <img class="img" src="../../static/img/record.png"/>
              <p class="title">历史搜索</p>
              <p class="clear" @click="clear">清除记录</p>
            </div>
            <div class="hot-search-tag">
              <tag :data="tagList"></tag>
            </div>
          </div>
          <!--搜索结果-->
          <div class="result-list" v-if="doctors.length > 0">
            <div class="title">为您找到{{doctors.length}}位医生</div>
            <ul>
              <li class="result-item" v-for="item in doctors">
                <router-link to="" class="result-item-a">
                  <span class="image"><slot name="img"><img src="../../static/img/mypic.jpg"></slot></span>
                  <div class="content">
                    <p class="name"><slot name="name">{{item.name}} {{item.hospitl}} {{item.department}}</slot></p>
                    <p class="location"><slot name="location">{{item.position}}</slot></p>
                    <p class="detail"><slot name="detail">一直从事...</slot></p>
                  </div>
                </router-link>
              </li>
              <div class="load-more">查看全部</div>
            </ul>
          </div>
          <div class="result-list" v-if="this.beadhouses.length > 0">
            <div class="title">为您找到{{beadhouses.length}}家医院</div>
            <ul>
              <li class="result-item" v-for="item in beadhouses">
                <router-link to="" class="result-item-a">
                  <span class="image"><img src="../../static/img/oldPeopleHome.png"></span>
                  <div class="content">
                    <p class="name"><slot name="name">{{item.name}} {{item.level}}</slot></p>
                    <p class="location"><slot name="location">{{item.location}}</slot></p>
                    <p class="detail"><slot name="detail">{{item.selectedNum}}</slot></p>
                  </div>
                </router-link>
              </li>
              <div class="load-more">查看全部</div>
            </ul>
          </div>
          <div class="none"></div>
        </div>
      </div>
    </scroll>
    <error-tip :err-msg="alertText" v-if="dialog"></error-tip>
  </div>
</template>

<script>
  import Scroll from "../components/scroll/scroll";
  import {ERR_OK} from "../api/config";
  import Tag from "../components/tag/tag";
  import {searchBeadhouse, searchDoctor} from "../api/search";
  import ErrorTip from "../components/errorTip/errorTip";

  window.addEventListener('storage', (e) => {
    console.log(e)
  })

  export  default{
    components: {
      ErrorTip,
      Tag,
      Scroll},
    name: 'search',
    data (){
      return {
        tagData: [],
        doctors: [],
        beadhouses: [],
        dataList: [],
        tagList: [],
        searchword: '',
        alertText: '',
        dialog: false
      }
    },
    created (){
    },
    mounted () {
      let loc = window.localStorage.getItem('tagList');
      if (loc) {
        this.tagList = JSON.parse(loc)
      }
    },
    methods: {
      clear () {
        window.localStorage.removeItem('tagList')
        this.tagList = []
      },
      tosearch () {
        let param = {
          keyword: this.searchword
        }
        searchBeadhouse(param).then((res) => {
          let response = res.data
          if (response.code === ERR_OK) {
            // this.alertText = response.msg
            // this.dialog = true
            this.tagList.push({content: this.searchword})
            this.beadhouses = response.result
            this.dataList = response.result
          } else {
            this.beadhouses = []
            // this.alertText = response.msg
            // this.dialog = true
            // setTimeout(() => {
            //   this.alertText = ''
            //   this.dialog = false
            // }, 1000)
          }
        }).catch((err) => {
          console.log(err)
          this.beadhouses = []
          this.alertText = '请检查网路'
          this.dialog = true
          setTimeout(() => {
            this.alertText = ''
            this.dialog = false
          }, 1000)
        });
        searchDoctor(param).then((res) => {
          let response = res.data
          if (response.code === ERR_OK) {
            // this.alertText = response.msg
            // this.dialog = true
            this.tagList.push({content: this.searchword})
            this.doctors = response.result
            this.dataList = response.result
          } else {
            this.doctors = []
            // this.alertText = response.msg
            // this.dialog = true
            // setTimeout(() => {
            //   this.alertText = ''
            //   this.dialog = false
            // }, 1000)
          }
        }).catch((err) => {
          console.log(err)
          this.doctors = []
          this.alertText = '请检查网路'
          this.dialog = true
          setTimeout(() => {
            this.alertText = ''
            this.dialog = false
          }, 1000)
        })
      },
      back(){
        window.history.go(-1);
      }
    },
    watch: {
      'tagList'() {
        window.localStorage.setItem('tagList',JSON.stringify(this.tagList))
      }
    }
  }
</script>

<style scoped>
  .container{
    background-color: #eeeeee;
    height: 100%;
    position: relative;
    overflow-y: auto;
    height: 100vh;
    overflow: hidden;
  }
  .search-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px 24px 20px 40px;/*rem*/
    background: -o-linear-gradient(bottom right, rgba(95, 139, 247,1), rgba(95, 194, 249, 1));
    background: -moz-linear-gradient(bottom right, rgba(95, 139, 247,1), rgba(95, 194, 249, 1));
    background: linear-gradient(to bottom right, rgba(95, 139, 247,1), rgba(95, 194, 249, 1));
    display: flex;
    align-items: center;
    font-size: 0;
  }
  .back{
    width: 30px;/*rem*/
    height: 30px;/*rem*/
    margin-right: 56px;/*rem*/
  }

  .search-container input {
    width: 100%;
    outline: none;
    border: none;
    font-size: 24px;/*px*/
    background-color: #ffffff;
  }
  .search {
    flex: 1;
    padding: 0 10px 0 70px;/*rem*/
    border-radius: 10px;/*rem*/
    background-color: #ffffff;
    background-image: url("../../static/img/search.png");
    background-size: 30px 30px;/*rem*/
    background-repeat: no-repeat;
    background-position: 18px center;/*rem*/
    height: 48px;/*rem*/
    line-height: 48px;/*rem*/
  }
  #back {
    font-size: 24px;/*px*/
    color: #fff;
    margin-left: 56px;/*rem*/
  }

  .container-scroll{
    margin-top: 88px;/*rem*/
    overflow: hidden;
    height: 100vh;
  }
  .container-scroll-box{
    /*margin-bottom: 90px;!*rem*!*/
    padding-bottom: 90px;/*rem*/
  }
  .hot-search {
    background-color: #ffffff;
    padding: 26px 28px;/*rem*/
  }

  .hot-search-title {
    padding: 0 6px;
    display: flex;
  }

  .hot-search-title .img{
    height: 27px;/*rem*/
    width: 27px;/*rem*/
    margin-right: 20px;/*rem*/
  }
  .hot-search-title .title{
    color: #999999;
    font-size: 20px;/*px*/
  }
  .hot-search-title .clear{
    color: #e14a55;
    font-size: 20px;/*px*/
  }

  .hot-search-tag {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    margin-top: 24px;/*rem*/
  }

  .tag {
    padding: 14px 24px;/*rem*/
    font-size: 24px;/*px*/
    background-color: #f2fffd;
    border: 1px solid #9fdecf;
    color: #57b5a9;
    border-radius: 10px;/*rem*/
    margin-top: 10px;/*rem*/
    margin-right: 20px;/*rem*/
  }
  .result-list{
    margin-top: 20px;/*rem*/
    background-color: #ffffff;
  }
  .result-list .title{
    height: 60px;/*rem*/
    line-height: 60px;/*rem*/
    padding: 0 28px;/*rem*/
    font-size: 26px;/*px*/
    color: #3d3d3d;
    border-bottom: 1px solid #ededed;
  }
  .result-item{
    /*padding: 26px 0 26px 26px;!*rem*!*/
  }
  .result-item-a{
    display: flex;
    align-items: center;
  }
  .result-item .image{
    margin: 0 26px;/*rem*/
    width: 74px;/*rem*/
    height: 74px;/*rem*/
    border-radius: 50%;
  }
  .result-item .image img{
    width: 100%;
    height: 100%;
  }
  .result-item .content{
    display: flex;
    flex: 1;
    flex-direction: column;
    border-bottom: 1px solid #f2f2f2;
    padding: 26px 26px 26px 0;/*rem*/
  }
  .result-item .content .name{
    font-size: 26px;/*px*/
    color: #5b5b5b;
  }
  .result-item .content .location,.result-item .content .detail{
    font-size: 24px;/*rem*/
    color: #999999;
  }
  .load-more{
    font-size: 28px;/*px*/
    color: #58b2e7;
    text-align: center;
    height: 80px;/*rem*/
    line-height: 80px;/*rem*/
    border-top: 1px solid #f2f2f2;
  }
</style>
